<template>
  <div class="agent-management-container">
    <!-- 警告提示 -->
    <div class="alert-wrapper">
      <el-alert type="warning" closable class="enhanced-alert">
        <template #default>
          <div class="alert-content">
            <Icon icon="ep:warning" class="alert-icon" />
            <div class="alert-text">
              <strong>重要提示：</strong>
              在使用VOS点呼/群呼，双向回拨业务之前，需提交主叫号码加白审批，
              在《加白审批管理》中添加话术，待审批通过后才可拨打
            </div>
          </div>
        </template>
      </el-alert>
    </div>

    <!-- 搜索筛选区域 -->
    <ContentWrap class="search-wrapper">
      <div class="search-header">
        <div class="header-icon">
          <Icon icon="ep:user-filled" />
        </div>
        <div class="header-content">
          <h3 class="search-title">坐席管理</h3>
          <p class="search-subtitle">管理和配置坐席信息</p>
        </div>
      </div>

      <div class="search-form-wrapper">
        <el-form
          :model="queryParams"
          ref="queryFormRef"
          :inline="true"
          label-width="80px"
          label-position="left"
          class="enhanced-search-form"
        >
          <div class="form-grid">
            <el-form-item label="坐席工号" prop="agentNumber" class="form-item">
              <el-input
                v-model="queryParams.agentNumber"
                placeholder="请输入坐席工号"
                clearable
                @keyup.enter="handleQuery"
                class="enhanced-input"
              >
                <template #prefix>
                  <Icon icon="ep:postcard" />
                </template>
              </el-input>
            </el-form-item>

            <el-form-item label="负责人" prop="ownerUserId" class="form-item">
              <el-select
                v-model="queryParams.ownerUserId"
                clearable
                filterable
                class="enhanced-select"
              >
                <template #prefix>
                  <Icon icon="ep:user" />
                </template>
                <el-option
                  v-for="item in userOptions"
                  :key="parseInt(item.id)"
                  :label="item.nickname"
                  :value="parseInt(item.id)"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="外呼手机" prop="telephone" class="form-item">
              <el-input
                v-model="queryParams.telephone"
                placeholder="请输入外呼手机"
                clearable
                @keyup.enter="handleQuery"
                class="enhanced-input"
              >
                <template #prefix>
                  <Icon icon="ep:phone" />
                </template>
              </el-input>
            </el-form-item>

            <el-form-item label="真实姓名" prop="realName" class="form-item">
              <el-input
                v-model="queryParams.realName"
                placeholder="请输入真实姓名"
                clearable
                @keyup.enter="handleQuery"
                class="enhanced-input"
              >
                <template #prefix>
                  <Icon icon="ep:user-filled" />
                </template>
              </el-input>
            </el-form-item>

            <el-form-item label="创建时间" prop="createTime" class="form-item">
              <el-date-picker
                v-model="queryParams.createTime"
                value-format="YYYY-MM-DD HH:mm:ss"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
                class="enhanced-date-picker"
              />
            </el-form-item>
          </div>

          <div class="form-actions">
            <div class="action-group primary-actions">
              <el-button @click="handleQuery" class="search-btn">
                <Icon icon="ep:search" class="btn-icon" />
                搜索
              </el-button>
              <el-button @click="resetQuery" class="reset-btn">
                <Icon icon="ep:refresh" class="btn-icon" />
                重置
              </el-button>
            </div>
            <div class="action-group secondary-actions">
              <el-button
                type="success"
                plain
                @click="onPayment('call-agent')"
                :loading="exportLoading"
                class="purchase-btn"
              >
                <Icon icon="ep:goods-filled" class="btn-icon" />
                购买坐席
              </el-button>
              <el-button
                type="success"
                plain
                @click="beforePayment('simple-call', 1)"
                :loading="exportLoading"
                :disabled="multipleSelection.length == 0"
                class="purchase-btn"
              >
                <Icon icon="ep:goods-filled" class="btn-icon" />
                购买点呼话费
              </el-button>
              <el-button
                type="success"
                plain
                @click="beforePayment('double-call', 1)"
                :loading="exportLoading"
                :disabled="multipleSelection.length == 0"
                class="purchase-btn"
              >
                <Icon icon="ep:goods-filled" class="btn-icon" />
                购买双呼话费
              </el-button>
            </div>
          </div>
        </el-form>
      </div>
    </ContentWrap>

    <!-- 列表区域 -->
    <ContentWrap class="table-wrapper">
      <div class="table-container">
        <el-table
          v-loading="loading"
          :data="list"
          :stripe="true"
          :show-overflow-tooltip="true"
          @selection-change="handleSelectionChange"
          border
          class="enhanced-table"
        >
          <el-table-column type="selection" width="55" />

          <el-table-column label="坐席工号" align="center" prop="agentNumber" width="120">
            <template #default="scope">
              <div class="agent-number">
                <Icon icon="ep:postcard" class="agent-icon" />
                <span class="agent-text">{{ scope.row.agentNumber }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="负责人" align="center" prop="ownerUsername" width="120">
            <template #default="scope">
              <div class="owner-info">
                <Icon icon="ep:user" class="owner-icon" />
                <span class="owner-text">{{ scope.row.ownerUsername }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="点呼主叫加白"
            align="center"
            prop="sipCallAuditStatus"
            width="140"
          >
            <template #default="scope">
              <div class="audit-status">
                <el-tag
                  v-if="auditStatusMap[scope.row.sipCallAuditStatus]"
                  :type="auditStatusMap[scope.row.sipCallAuditStatus].type"
                  class="status-tag"
                >
                  <Icon :icon="getAuditIcon(scope.row.sipCallAuditStatus)" class="tag-icon" />
                  {{ auditStatusMap[scope.row.sipCallAuditStatus].text }}
                </el-tag>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="双向回拨加白"
            align="center"
            prop="doubleCallAuditStatus"
            width="140"
          >
            <template #default="scope">
              <div class="audit-status">
                <el-tag
                  v-if="auditStatusMap[scope.row.doubleCallAuditStatus]"
                  :type="auditStatusMap[scope.row.doubleCallAuditStatus].type"
                  class="status-tag"
                >
                  <Icon :icon="getAuditIcon(scope.row.doubleCallAuditStatus)" class="tag-icon" />
                  {{ auditStatusMap[scope.row.doubleCallAuditStatus].text }}
                </el-tag>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="状态" align="center" prop="status" width="120">
            <template #default="scope">
              <div class="status-info">
                <el-tag type="info" v-if="scope.row.status == 0" class="status-tag">
                  <Icon icon="ep:close" class="tag-icon" />
                  未启用
                </el-tag>
                <el-tag type="success" v-if="scope.row.status == 1" class="status-tag">
                  <Icon icon="ep:check" class="tag-icon" />
                  已启用
                </el-tag>
                <el-tag type="danger" v-if="scope.row.status == 9" class="status-tag">
                  <Icon icon="ep:warning" class="tag-icon" />
                  已过期
                </el-tag>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="第一班组" align="center" prop="groupName" width="120">
            <template #default="scope">
              <div class="group-info">
                <Icon icon="ep:user-filled" class="group-icon" />
                <span class="group-text">{{ scope.row.groupName || '-' }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="第二班组" align="center" prop="secGroupName" width="120">
            <template #default="scope">
              <div class="group-info">
                <Icon icon="ep:user-filled" class="group-icon" />
                <span class="group-text">{{ scope.row.secGroupName || '-' }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="有效期" align="center" prop="expireTime" width="200">
            <template #default="scope">
              <div class="expire-info">
                <Icon icon="ep:calendar" class="expire-icon" />
                <span v-if="scope.row.expireTime == 0" class="expire-text permanent">永久</span>
                <span v-else class="expire-text">至：{{ formatDate(scope.row.expireAt) }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="双呼主叫手机号" align="center" prop="telephone" width="150">
            <template #default="scope">
              <div class="phone-info">
                <Icon icon="ep:phone" class="phone-icon" />
                <span class="phone-text">{{ scope.row.telephone || '-' }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="真实姓名" align="center" prop="realName" width="220">
            <template #default="scope">
              <div class="name-cell">
                <div v-if="scope.row.realName != null" class="name-display">
                  <Icon icon="ep:user-filled" class="name-icon" />
                  <span class="name-text">{{ scope.row.realName }}</span>
                </div>
                <div v-if="scope.row.realName == null" class="name-input-section">
                  <el-input
                    maxlength="10"
                    clearable
                    v-if="scope.row.isShowRealNameInput == true"
                    v-model.trim="scope.row.realNameValue"
                    class="name-input"
                    placeholder="请输入真实姓名"
                  />
                  <div class="input-actions">
                    <el-icon
                      v-if="!scope.row.isShowRealNameInput"
                      @click="scope.row.isShowRealNameInput = !scope.row.isShowRealNameInput"
                      class="action-icon add-icon"
                    >
                      <Plus />
                    </el-icon>
                    <el-icon
                      v-if="scope.row.isShowRealNameInput"
                      @click="handleSaveName(scope.row.realNameValue, scope.row, 'name')"
                      class="action-icon save-icon"
                    >
                      <Select />
                    </el-icon>
                    <el-icon
                      v-if="scope.row.isShowRealNameInput"
                      @click="scope.row.isShowRealNameInput = !scope.row.isShowRealNameInput"
                      class="action-icon cancel-icon"
                    >
                      <CloseBold />
                    </el-icon>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="身份证号" align="center" prop="idNumber" width="280">
            <template #default="scope">
              <div class="id-cell">
                <div v-if="scope.row.idNumber != null" class="id-display">
                  <Icon icon="ep:postcard" class="id-icon" />
                  <span class="id-text">{{ scope.row.idNumber }}</span>
                </div>
                <div v-if="scope.row.idNumber == null" class="id-input-section">
                  <el-input
                    maxlength="18"
                    clearable
                    v-if="scope.row.isShowIdNumberInput == true"
                    v-model.trim="scope.row.idNumberValue"
                    class="id-input"
                    placeholder="请输入身份证号"
                  />
                  <div class="input-actions">
                    <el-icon
                      v-if="!scope.row.isShowIdNumberInput"
                      @click="scope.row.isShowIdNumberInput = !scope.row.isShowIdNumberInput"
                      class="action-icon add-icon"
                    >
                      <Plus />
                    </el-icon>
                    <el-icon
                      v-if="scope.row.isShowIdNumberInput"
                      @click="handleSaveName(scope.row.idNumberValue, scope.row, 'idNumber')"
                      class="action-icon save-icon"
                    >
                      <Select />
                    </el-icon>
                    <el-icon
                      v-if="scope.row.isShowIdNumberInput"
                      @click="scope.row.isShowIdNumberInput = !scope.row.isShowIdNumberInput"
                      class="action-icon cancel-icon"
                    >
                      <CloseBold />
                    </el-icon>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime"
            :formatter="dateFormatter"
            width="180px"
          />

          <el-table-column label="操作" align="center" width="300" fixed="right">
            <template #default="scope">
              <div class="flex">
                <el-button type="primary" link @click="showPackage(scope.row)" class="action-btn">
                  <Icon icon="ep:wallet" class="btn-icon" />
                  套餐余额
                </el-button>
                <el-button
                  link
                  type="success"
                  :disabled="scope.row.expireTime == 0"
                  @click="onRenew('call-agent', scope.row.id)"
                  v-hasPermi="['call:agent:update']"
                  class="action-btn"
                >
                  <Icon icon="ep:refresh" class="btn-icon" />
                  续费
                </el-button>
                <el-button
                  link
                  type="primary"
                  @click="openForm('update', scope.row.id)"
                  v-hasPermi="['call:agent:update']"
                  class="action-btn"
                >
                  <Icon icon="ep:edit" class="btn-icon" />
                  编辑
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-wrapper">
          <Pagination
            :total="total"
            v-model:page="queryParams.pageNo"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
    </ContentWrap>

    <!-- 表单弹窗：添加/修改 -->
    <AgentForm ref="formRef" @success="getList" />

    <!-- 购买套餐弹窗 -->
    <SkuFormDialog ref="skuFormDialog" />

    <!-- 续费弹窗 -->
    <RenewPackageDialog ref="renewPackgeRef" />

    <!-- 套餐余额 -->
    <PackagePalance ref="tablePackage" />
  </div>
</template>

<script setup lang="ts">
import SkuFormDialog from '@/components/SkuFormDialog/index.vue'
import RenewPackageDialog from '@/components/RenewPackageDialog/index.vue'
import { dateFormatter, formatDate } from '@/utils/formatTime'
import * as AgentApi from '@/api/call/agent'
import AgentForm from './AgentForm.vue'
import { Plus, Select, CloseBold } from '@element-plus/icons-vue'
import * as UserApi from '@/api/system/user'
import PackagePalance from '@/components/PackagePalance/index.vue'
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
const { wsCache } = useCache('localStorage')

const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表

defineOptions({ name: 'Agent' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const list = ref([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  agentNumber: undefined,
  telephone: undefined,
  realName: undefined,
  createTime: [],
  ownerUserId: ''
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
const auditStatusMap = {
  0: { type: 'info', text: '待审批' },
  1: { type: 'success', text: '已加白' },
  2: { type: 'danger', text: '不通过' }
}

// 获取审核状态图标
const getAuditIcon = (status) => {
  switch (status) {
    case 0:
      return 'ep:clock'
    case 1:
      return 'ep:check'
    case 2:
      return 'ep:close'
    default:
      return 'ep:info-filled'
  }
}

// 选择坐席
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await AgentApi.getAgentPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

const handleSaveName = async (val, row, field) => {
  if (field == 'name') {
    if (val) {
      row.realName = val
    } else {
      message.error('请输入真实姓名')
      return
    }
  }
  if (field == 'idNumber') {
    let idReg =
      /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/
    if (idReg.test(val) != true) {
      message.error('请输入有效的身份证号码！')
      return
    } else {
      row.idNumber = val
    }
  }
  await AgentApi.updateAgent(row)
  message.success(t('common.updateSuccess'))
  row.isShowRealNameInput = false
}

// 支付前置操作
const beforePayment = async (type, number) => {
  // 验证所选坐席是否绑定了负责人， 验证所选坐席sip是否加白
  let newList = multipleSelection.value.filter((v) => {
    return v.ownerUserId != null && v.ownerUserId != 0 && v.ownerUserId != ''
  })
  if (newList.length == 0) {
    message.error('所选坐席必须有指定的负责人')
    return
  } else {
    message.success('已自动过滤掉未分配负责人的坐席')
  }
  if (type == 'simple-call') {
    const unAuditList = newList.filter((v) => v.sipCallAuditStatus != 1)
    if (unAuditList.length > 0) {
      // 弹窗提示用户
      await message.confirm('所选坐席中存在未审核主叫加白的记录，是否继续购买？', '提示')
    }
  } else if (type == 'double-call') {
    const unAuditList = newList.filter((v) => v.doubleCallAuditStatus != 1)
    if (unAuditList.length > 0) {
      // 弹窗提示用户
      await message.confirm('所选坐席中存在未审核主叫加白的记录，是否继续购买？', '提示')
    }
  }
  onPayment(
    type,
    number,
    newList.map((v) => v.ownerUserId)
  )
}

const skuFormDialog = ref()
// 吊起支付方法
const onPayment = (code: string, type?: number = 2, userIdList) => {
  skuFormDialog.value.open(type, code, null, userIdList)
}

const renewPackgeRef = ref()
// 吊起续费方法
const onRenew = (code: string, rowId) => {
  renewPackgeRef.value.open(code, rowId)
}
const getUserOptions = async () => {
  userOptions.value = await UserApi.getSimpleUserList()
}

const tablePackage = ref(null)
/*套餐余额*/
const showPackage = (item) => {
  tablePackage.value.open(item.ownerUserId, wsCache.get(CACHE_KEY.TenantId))
}
/** 初始化 **/
onMounted(() => {
  getList()
  getUserOptions()
})
</script>

<style lang="scss" scoped>
.agent-management-container {
  padding: 16px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;

  @media (max-width: 768px) {
    padding: 8px;
  }
}

/* 警告提示样式 */
.alert-wrapper {
  margin-bottom: 16px;
}

.enhanced-alert {
  border-radius: 12px;
  border: 1px solid #fbbf24;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.2);

  :deep(.el-alert__content) {
    padding: 0;
  }
}

.alert-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 4px 0;

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 8px;
  }
}

.alert-icon {
  color: #f59e0b;
  font-size: 18px;
  margin-top: 2px;
  flex-shrink: 0;

  @media (max-width: 768px) {
    font-size: 16px;
  }
}

.alert-text {
  flex: 1;
  line-height: 1.5;
  color: #92400e;
  font-size: 14px;

  @media (max-width: 768px) {
    font-size: 13px;
  }

  strong {
    font-weight: 600;
    color: #78350f;
  }
}

/* 搜索区域样式 */
.search-wrapper {
  margin-bottom: 16px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
}

.search-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  color: white;
  border-radius: 10px;

  @media (max-width: 768px) {
    padding: 16px;
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
}

.header-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;

  @media (max-width: 768px) {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

.header-content {
  flex: 1;
}

.search-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 4px 0;

  @media (max-width: 768px) {
    font-size: 18px;
  }
}

.search-subtitle {
  font-size: 14px;
  opacity: 0.9;
  margin: 0;

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

.search-form-wrapper {
  background: white;
  padding: 24px;

  @media (max-width: 768px) {
    padding: 16px;
  }
}

.enhanced-search-form {
  .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 24px;

    @media (max-width: 768px) {
      grid-template-columns: 1fr;
      gap: 16px;
      margin-bottom: 20px;
    }
  }

  .form-item {
    margin-bottom: 0;

    :deep(.el-form-item__label) {
      font-weight: 500;
      color: #374151;
    }
  }
}

.enhanced-input,
.enhanced-select,
.enhanced-date-picker {
  width: 100%;

  :deep(.el-input__wrapper) {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
    }

    &.is-focus {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.2);
    }
  }
}

.form-actions {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 12px;
  }
}

.action-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;

  @media (max-width: 768px) {
    width: 100%;
    justify-content: center;
  }
}

.primary-actions {
  @media (max-width: 768px) {
    order: 1;
  }
}

.secondary-actions {
  @media (max-width: 768px) {
    order: 2;
    flex-direction: column;
    width: 100%;
  }
}

.search-btn {
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 500;
  color: white;

  @media (max-width: 768px) {
    width: 100px;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

.reset-btn {
  border: 2px solid #e5e7eb;
  color: #6b7280;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 500;

  &:hover {
    border-color: #d1d5db;
    color: #374151;
  }

  @media (max-width: 768px) {
    width: 100px;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

.purchase-btn {
  border: 2px solid #10b981;
  color: #10b981;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 500;

  &:hover {
    background: rgba(16, 185, 129, 0.05);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  @media (max-width: 768px) {
    width: 100%;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

/* 表格区域样式 */
.table-wrapper {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
}

.table-container {
  background: white;
  overflow-x: auto;
}

.enhanced-table {
  :deep(.el-table__header) {
    background: #f8fafc;

    th {
      background: #f8fafc !important;
      color: #374151;
      font-weight: 600;
      border-bottom: 2px solid #e5e7eb;
    }
  }

  :deep(.el-table__row) {
    &:hover {
      background: rgba(0, 82, 204, 0.02) !important;
    }
  }

  :deep(.el-table__cell) {
    padding: 12px 8px;
    border-bottom: 1px solid #f1f5f9;
  }
}

/* 表格内容样式 */
.agent-number,
.owner-info,
.group-info,
.phone-info {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.agent-icon,
.owner-icon,
.group-icon,
.phone-icon {
  color: #6b7280;
  font-size: 14px;
  flex-shrink: 0;
}

.agent-text,
.owner-text,
.group-text,
.phone-text {
  color: #1f2937;
  font-weight: 500;
  font-size: 14px;
}

.audit-status,
.status-info {
  display: flex;
  justify-content: center;
}

.status-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  font-size: 12px;

  .tag-icon {
    font-size: 12px;
  }
}

.expire-info {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.expire-icon {
  color: #6b7280;
  font-size: 14px;
  flex-shrink: 0;
}

.expire-text {
  color: #1f2937;
  font-weight: 500;
  font-size: 14px;

  &.permanent {
    color: #10b981;
    font-weight: 600;
  }
}

/* 姓名和身份证输入区域 */
.name-cell,
.id-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.name-display,
.id-display {
  display: flex;
  align-items: center;
  gap: 8px;
}

.name-icon,
.id-icon {
  color: #0052cc;
  font-size: 14px;
  flex-shrink: 0;
}

.name-text,
.id-text {
  color: #1f2937;
  font-weight: 500;
  font-size: 14px;
}

.name-input-section,
.id-input-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.name-input {
  width: 120px;

  :deep(.el-input__wrapper) {
    border-radius: 6px;
    font-size: 12px;
  }
}

.id-input {
  width: 200px;

  :deep(.el-input__wrapper) {
    border-radius: 6px;
    font-size: 12px;
  }
}

.input-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.action-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;

  &.add-icon {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);

    &:hover {
      background: rgba(16, 185, 129, 0.2);
      transform: scale(1.1);
    }
  }

  &.save-icon {
    color: #0052cc;
    background: rgba(0, 82, 204, 0.1);

    &:hover {
      background: rgba(0, 82, 204, 0.2);
      transform: scale(1.1);
    }
  }

  &.cancel-icon {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);

    &:hover {
      background: rgba(239, 68, 68, 0.2);
      transform: scale(1.1);
    }
  }
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;

  @media (max-width: 768px) {
    gap: 6px;
  }
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
  min-width: 70px;
  justify-content: center;

  &:hover {
    background: rgba(0, 82, 204, 0.1);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;

    &:hover {
      background: transparent;
    }
  }

  .btn-icon {
    font-size: 12px;
  }
}

.pagination-wrapper {
  padding: 20px 24px;
  background: white;
  border-top: 1px solid #f1f5f9;

  @media (max-width: 768px) {
    padding: 16px;
  }

  :deep(.el-pagination) {
    justify-content: center;

    @media (max-width: 768px) {
      .el-pagination__sizes,
      .el-pagination__jump {
        display: none;
      }
    }
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .agent-management-container {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  }

  .enhanced-alert {
    background: linear-gradient(135deg, #451a03 0%, #78350f 100%);
    border-color: #92400e;
  }

  .alert-text {
    color: #fbbf24;

    strong {
      color: #fde68a;
    }
  }

  .search-wrapper,
  .table-wrapper {
    background: #374151;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  .search-form-wrapper,
  .table-container,
  .pagination-wrapper {
    background: #374151;
  }

  .search-title {
    color: #f9fafb;
  }

  .agent-text,
  .owner-text,
  .group-text,
  .phone-text,
  .name-text,
  .id-text,
  .expire-text {
    color: #f9fafb;
  }

  .agent-icon,
  .owner-icon,
  .group-icon,
  .phone-icon,
  .expire-icon {
    color: #d1d5db;
  }

  .name-icon,
  .id-icon {
    color: #60a5fa;
  }

  .enhanced-table {
    :deep(.el-table__header) {
      background: #4b5563;

      th {
        background: #4b5563 !important;
        color: #f9fafb;
        border-bottom-color: #6b7280;
      }
    }

    :deep(.el-table__cell) {
      border-bottom-color: #4b5563;
    }
  }

  .enhanced-input,
  .enhanced-select,
  .enhanced-date-picker {
    :deep(.el-input__wrapper) {
      background: #4b5563;
      border-color: #6b7280;

      .el-input__inner {
        color: #f9fafb;
      }
    }
  }

  .name-input,
  .id-input {
    :deep(.el-input__wrapper) {
      background: #4b5563;
      border-color: #6b7280;

      .el-input__inner {
        color: #f9fafb;
      }
    }
  }
}
</style>
